<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 0px; font-size: 1.4em; height: 50px; }
#sortable li span {padding-right: 20px; padding-left: 10px; }
#sortable li button{ float: right; padding: 5px 10px; }
.resturant-box { border-left: 2px solid #000; }
</style>

<div id="event-id" class="hidden" data-event-id=<%= current_event.id%>></div>

<div class="row">
  <div class="col-md-6 content-box">
		<ul id="sortable">
		</ul>
		<button id="saveFunctionOrder" class="btn btn-primary hidden" style="margin-top: 20px;">保存</button>
	</div>

	<div class="col-md-6 resturant-box">
		<%= form_for @restaurant, url: event_restaurant_path(current_event, @restaurant), html: {class: 'form-horizontal'} do |f|%>

		  <div class="form-group">
		    <label class="col-md-3 control-label">酒店名称</label>
		    <div class="col-md-8">
		      <%=f.text_field :restaurant_name, class: 'form-control'%>
		    </div>
		  </div>

		  <div class="form-group">
		    <label class="col-md-3 control-label">酒店电话</label>
		    <div class="col-md-8">
		      <%=f.text_field :phone_number, class: 'form-control'%>
		    </div>
		  </div>
		  <div class="form-group">
		  	<div class="col-md-3 control-label">
		  		<label>请上传一个750*300像素的酒店图片</label>
		  	</div>
		    <% if @restaurant.head_photo.present? %>
		      <div class="col-md-3 col-md-offset-2">
		        <img src=<%=@restaurant.head_photo.url%> width="100px">
		      </div>
		    <% end %>
		  	<div class="col-md-8">
		  		<%= f.file_field :head_photo, class: 'form-control' %>
		  	</div>
		  </div>

		  <div class="form-group">
		    <label class="col-md-3 control-label">地址</label>
		    <div class="col-md-8">
		      <%=f.text_field :address, class: 'form-control'%>
		    </div>
		  </div>

		  <div id="r-result">请在下图标注酒店位置:
		    <%= text_field_tag :address, @address, id: 'suggestId' %>
		    <%= text_field_tag :latitude, @latitude, class: "hidden", id: "posion-position-lng" %>
		    <%= text_field_tag :longitude, @longitude, class: "hidden", id: "posion-position-lat" %>
		  </div>

		  <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:300px;height:auto; display:none;"></div>
		  <div id="l-map" class="col-md-10" style="height:300px;width:100%;"></div>

		  <div class="form-group">
		    <div class="col-sm-4 col-sm-offset-2">
		      <%= button_tag '保存', class: 'btn btn-primary', style: 'margin-top: 10px;'%>
		    </div>
		  </div>

		<% end %>
		<script type="text/javascript">
		  var BaiDuApi = {
		  G: function(id){
		    return document.getElementById(id);
		  },

		  setPlace: function(){
		    var self = BaiDuApi;

		    self.map.clearOverlays();

		    function myFun(){
		      var pp = local.getResults().getPoi(0).point;

		      $('#posion-position-lng').val(pp['lng']);
		      $('#posion-position-lat').val(pp['lat']);
		      self.map.centerAndZoom(pp, 18);
		      self.map.addOverlay(new BMap.Marker(pp));//添加标注
		    }

		    var local = new BMap.LocalSearch(self.map, { //智能搜索
		      onSearchComplete: myFun
		    });
		    local.search(self.myValue);
		  },

		  onACHighLighted: function(e){//鼠标放在下拉列表上的事件
		    var self = BaiDuApi;
		    var str = "";
		    var _value = e.fromitem.value;
		    var value = "";
		    
		    if (e.fromitem.index > -1) {
		      value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    }
		    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		  
		    value = "";
		    if (e.toitem.index > -1) {
		      _value = e.toitem.value;
		      value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    }
		    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		    self.G("searchResultPanel").innerHTML = str;
		  },

		  onAcConfirmed: function(e){
		    var self = BaiDuApi;

		    var _value = e.item.value;

		    self.myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		    self.G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + self.myValue;
		    self.setPlace();
		  },

		  onMapCliked: function(e){
		    var self = BaiDuApi;

		    $('#posion-position-lng').val(e.point['lng']);
		    $('#posion-position-lat').val(e.point['lat']);

		    self.map.clearOverlays();
		    self.map.centerAndZoom(e.point, self.map.getZoom());
		    self.map.addOverlay(new BMap.Marker(e.point));
		    self.map.setDefaultCursor("url('01.cur')");        //设置地图默认的鼠标指针样式   
		    self.map.setDraggingCursor("url('03.cur')");
		  },

		  initialize: function(){
		    var self = BaiDuApi;

		    self.map = new BMap.Map("l-map");
		    var longitude = $('#posion-position-lng').val();
		    var latitude = $('#posion-position-lat').val();
		    self.map = new BMap.Map("l-map");
		    if (longitude&&latitude) {
		      var point = new BMap.Point(longitude, latitude);  // 创建点坐标
		      self.map.centerAndZoom(point, 18);
		      var marker = new BMap.Marker(point);        // 创建标注    
		      self.map.addOverlay(marker);
		    }else{
		      self.map.centerAndZoom("北京",14);
		    }

		    var ac = new BMap.Autocomplete(
		      {
		        "input"     : "suggestId"
		        ,"location" : self.map
		      });

		    self.map.enableScrollWheelZoom();
		    self.map.enableKeyboard();

		    ac.addEventListener('onhighlight', self.onACHighLighted);
		    ac.addEventListener('onconfirm', self.onAcConfirmed);
		    self.map.addEventListener('click', self.onMapCliked);
		  }
		};
		BaiDuApi.initialize({});
		</script>

	</div>
</div>

<% content_for :style do %>
  <%= stylesheet_link_tag 'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css', media: 'all' %>
<% end %>

<% content_for :script do %>
<%= javascript_include_tag 'http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js' %>
<%= javascript_include_tag 'content_setting' %>
<% end %>
